<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/function.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="plugins/element-ui/element-ui.css">
	<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="scripts/request.js"></script>

</head>
<body>
<div id="app">
	<div id="welcomeImage">
		<img width="100%" height="150" src="images/banner.jpg" alt="welcome">
	</div>
	<div id="header" class="wrap">
		<div id="logo"><img src="images/logo.gif"/></div>
		<div class="help">
			<a href="shopping.html" id="shoppingBag" class="shopping">购物车{{ this.shoppingCar.length }}件</a>
			<a href="login.html">登录</a>
			<!-- class="button" id="logout"-->
			<a @click="logout" class="button" id="logout" href="#">注销</a>
			<a href="register.html">注册</a><a href="guestbook.html">留言</a>
			<a href="manage/index.html">后台管理</a>
		</div>
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="#">首页</a></li>
				<li><a href="#">图书</a></li>
				<li><a href="#">百货</a></li>
				<li><a href="#">品牌</a></li>
				<li><a href="#">促销</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="wrap">
			<ul class="clearfix">
				<li class="first"><a href="#">音乐</a></li>
				<li><a href="#">影视</a></li>
				<li><a href="#">少儿</a></li>
				<li><a href="#">动漫</a></li>
				<li><a href="#">小说</a></li>
				<li><a href="#">外语</a></li>
				<li><a href="#">数码相机</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">秋冬靴</a></li>
				<li><a href="#">运动鞋</a></li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">家纺用品</a></li>
				<li><a href="#">婴幼奶粉</a></li>
				<li><a href="#">饰品</a></li>
				<li class="last"><a href="#">Investor Relations</a></li>
			</ul>
		</div>
	</div>
	<div id="main" class="wrap" v-loading="loading">
		<div class="lefter">
			<div class="box">
				<h2>商品分类</h2>
				<dl v-for="(item1, index) in parentList" :key="item1.id">
					<dt @click="toggleVisibility(index)">{{ item1.name }}</dt>
					<dd v-show="item1.visible" v-for="item2 in item1.subCategories" :key="item2.id">
						<a :href=`product-list.html?id=${item2.id}&pName=${item1.name}&sName=${item2.name}`>
							{{ item2.name }}</a>
					</dd>
				</dl>
			</div>
			<div class="spacer"></div>
			<div class="last-view">
				<h2>最近浏览</h2>
				<el-empty v-if="recentlyProduct === null" :image-size="30"></el-empty>
				<dl class="clearfix" v-else @click=handleClick(recentlyProduct.id)>
					<dt><img :src=`/common/download?name=${recentlyProduct.photo}`></dt>
					<dd>
						<p>{{recentlyProduct.name}}</p>
					</dd>
				</dl>
			</div>
		</div>
		<div class="main">
			<div class="price-off">
				<div class="slideBox">
					<ul id="slideBox">
						<li><img src="images/product/banner_1.jpg"/></li>
						<li><img src="images/product/banner_2.jpg"/></li>
						<li><img src="images/product/banner_3.jpg"/></li>
						<li><img src="images/product/banner_4.jpg"/></li>
					</ul>
				</div>
				<h2>商品列表</h2>
				<el-empty v-if="productList.length === 0" :image-size="200"></el-empty>
				<ul class="product clearfix">
					<li v-for="item in productList" :key="item.id">
						<dl>
							<dt><a :href=`product-view.html?id=${item.id}` target="_self">
								<img :src=`/common/download?name=${item.photo}`></a></dt>
							<dd class="title">
								<a :href=`product-view.html?id=${item.id}` target="_self">
									{{item.name}}
								</a></dd>
							<dd class="price">￥{{ item.price }}</dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="side">
				<div class="spacer"></div>
				<div class="news-list" v-loading="loading">
					<h4>新闻动态</h4>
					<ul>
						<li v-for="item in newsList" :key="item.id">
							<a :href=`news-view.html?id=${item.id}` target="_self">{{ item.title }}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="spacer clear"></div>
		</div>
	</div>
	<br/> <br/> <br/> <br/> <br/>
	<div id="footer">
		Copyright &copy; 2013 项目组 All Rights Reserved. 京ICP证1000001号
	</div>
</div>
<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="api/user.js"></script>
<script type="text/javascript" src="api/parentCategories.js"></script>
<script type="text/javascript" src="api/product.js"></script>
<script type="text/javascript" src="api/common.js"></script>
<script type="text/javascript" src="api/news.js"></script>
<!-- 引入组件库 -->
<script type="text/javascript" src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: '#app',
		data: {
			shoppingCar: [],
			loading: false,
			parentList: [],
			productList: [],
			newsList: [],
			recentlyProduct: null
		},
		created() {
			// 检测URL参数
			const urlParams = new URLSearchParams(window.location.search);
			let message = urlParams.get('message');
			if (message === 'NotLogin') {
				this.$message.error('请登录后再进行浏览网页哦');
			} else if (message === 'NotPower') {
				this.$message.error('暂无权限进入后台');
			}else if (message === 'Login'){
				this.$message.error('用户已登录，请注销后再尝试');
			}

			// 移除 message 参数
			if (message !== null) {
				urlParams.delete('message');

				// 获取当前 URL 的路径和其他参数
				const newUrl = `${window.location.pathname}?${urlParams.toString()}`;

				// 使用 history.pushState 更新浏览器地址栏中的 URL
				window.history.pushState({}, '', newUrl);
			}

			this.getParentCategories()
			this.getProductsList()

			this.getNewsList()

			this.recentlyProduct = JSON.parse(sessionStorage.getItem("product"));

			this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
		},
		methods: {
			logout() {
				logoutApi().then((res) => {
					if (res.code === 1) {
						localStorage.removeItem('userInfo')
						this.$message({
							message: res.data,
							type: 'success'
						});
					}
				})
			},
			async getParentCategories() {
				this.loading = true
				const list = await getParentCategoryAllList()
				this.parentList = list.data
				this.parentList.forEach(item => {
					this.$set(item, 'visible', true);
				});
				this.loading = false
			},
			toggleVisibility(index) {
				this.$set(this.parentList[index], 'visible', !this.parentList[index].visible);
			},
			async getProductsList() {
				const products = await getProductsListApi()
				this.productList = products.data
			},
			handleClick(productId) {
				goToSelfUrl(`product-view.html?id=${productId}`);
			},
			async getNewsList() {
				this.loading = true
				const resp = await newsPageApi(1, 10, '')
				this.newsList = resp.data.records

				this.newsList.forEach(item => {
					if (item.title.length > 15) {
						item.title = item.title.substring(0, 15) + '...';
					}
				});
				this.loading = false
			}

		},

	})
</script>
</body>
</html>
